import {connect} from "react-redux";
import React, {useEffect, useState} from "react";
import {Col, Row, Button} from "reactstrap";
import {SET_COST_FIELD} from "../../../../../../redux/constants/eventDetail/tabCosts";
import {
  deleteTemplate,
  getTemplate,
  updateItem,
  updateTemplate
} from "../../../../../../redux/actions/eventDetail/tabCosts";
import {Check, Save, Trash} from "react-feather";
import Checkbox from "../../../../../../components/@vuexy/checkbox/CheckboxesVuexy";
import * as Icon from "react-feather";
import Select from "react-select";
import About from "./About";
import {setFieldData} from "../../../../../../redux/actions/helper";

const TabCosts = props => {
  const {params, template, templateId, items, reqParams} = props;
  const {getTemplate, updateItem, setFieldData, updateTemplate, deleteTemplate} = props;
  const [nameValid, setNameValid] = useState(false);
  const [tooltipId, setTooltipId] = useState(null)

  useEffect(() => {
    if (params.template_id)
      getTemplate(params.template_id)
    return () => {

    }
  }, [params.template_id]);

  const Update = () => {
    if (template.name) {
      updateTemplate(template, templateId)
    } else {
      setNameValid(true)
    }
  }

  const Cost = (props) => {
    const {templateId, cost, id} = props
    return <div className="py-1">
      <>
        <div className="d-flex align-items-center justify-content-start costs-name">
          <Checkbox
            color="primary"
            icon={<Check className="vx-icon" size={16}/>}
            checked={cost.confirmed}
            value={id}
            onChange={e => {
              updateItem(cost.id, {...cost, confirmed: e.target.checked}, null, params.template_id, reqParams)
            }}
          />
          <span
            className="pl-0 pl-sm-1 pr-1">{cost.name && cost.name.length > 25 ? `${cost.name.slice(0, 22)}...` : cost.name}</span>
          <Icon.Info size={16} className="fonticon-wrap" onClick={() => setTooltipId(cost.id)}/>
        </div>
      </>
      <About templateId={templateId} isCost={false} eventId={null} placement={'left'} cost={cost}
             setTooltipId={setTooltipId} tooltipId={tooltipId}/>
    </div>
  }

  return (
    <>
      <div className="d-flex align-items-end mt-1">
        <div className="mr-1">
          <label htmlFor="name">Название</label>
          <input placeholder={'Название'}
                 id="name"
                 onChange={e => {
                   setNameValid(e.target.value.length === 0)
                   setFieldData(SET_COST_FIELD, 'template', {...template, name: e.target.value})
                 }}
                 value={template.name || ''}
                 className={`cost-item cost-item-input template-input h-auto w-100 ${nameValid && 'custom-input-invalid'}`}/>
        </div>
        <div>
          <Button.Ripple className="p-1 rounded-circle" color="flat-primary"
                         onClick={Update}
          >
            <Save size={16}/>
          </Button.Ripple>
          <Button.Ripple className="p-1 rounded-circle" color="flat-danger"
                         onClick={_ => deleteTemplate(templateId)}
          >
            <Trash size={16}/>
          </Button.Ripple>
        </div>
      </div>
      <Row className="mt-4">
        <Col>
          {
            items && items.map((value, id) => {
              return <div key={id} id={`popover-cost-${value.id}`}>
                <Cost id={id} templateId={templateId} cost={value}
                      setTooltipId={setTooltipId}
                      tooltipId={tooltipId}/>
              </div>
            })
          }
        </Col>
      </Row>
    </>
  )
}

const mapStateToProps = state => ({
  reqParams: state.eventCosts.reqParams,
  params: state.eventCosts.params,
  template: state.eventCosts.template,
  items: state.eventCosts.items
});
export default connect(mapStateToProps, {
  getTemplate,
  updateItem,
  setFieldData,
  updateTemplate,
  deleteTemplate
})(TabCosts)
